<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input
          type="text"
          placeholder="enter the name you search"
          v-model="keyWord"
        />&nbsp;
        <button @click="searchUsers()">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Search",
  data() {
    return {
      keyWord: ''
    }
  },
  methods: {
    searchUsers() {
      //请求前更新List的数据
      this.$bus.$emit('updateListData', { isFirst: false, isLoading: true, errMsg: '', users: [] })
      this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {
        // console.log('数据请求成功啦', response.data.items);
        //请求成功后更新List的数据
        this.$bus.$emit('updateListData', { isLoading: false, errMsg: '', users: response.data.items })
      }, error => {
        // console.log('数据请求失败', error.message);
        // 请求后更新List的数据
        this.$bus.$emit('updateListData', { isLoading: false, errMsg: error.message, users: [] })
      })
    }
  },
}
</script>

<style>
</style>